<template>
    <div>
        <nav-header title="回复详情"></nav-header>

        <!-- 当前评论 -->
        <div class="sun">
            <div class="sun1">
                <van-image round width="60px" height="60px" :src="list.info.avatar">
                    <template v-slot:error>加载失败</template>
                </van-image>
                <div class="username1">
                    <p class="name1">{{ list.info.nickname }}</p>
                    <p class="zan1" v-html="list.content"></p>
                    <p class="time1">{{ list.create_time | moment }}
                        <span class="btn">{{ list.reply_num }}回复</span>
                    </p>
                </div>
            </div>
            <span class="rigeht1">
                <van-icon name="good-job" size="20px" color="red" />
                <span class="yes">{{ list.like_count }}</span>
            </span>
        </div>

        <h4 style="margin-left: 20px;">回复列表</h4>


        <div class="sunplas" v-for="(item, index) in listall" :key="index">
            <div class="sun1">
                <van-image round width="60px" height="60px" :src="item.info.avatar">
                    <template v-slot:error>加载失败</template>
                </van-image>
                <div class="username1">
                    <p class="name1">{{ item.info.nickname }}</p>
                    <p class="zan1" v-html="item.content"></p>
                    <p class="time1">{{ item.create_time | moment }}
                        <!-- @click="gobacklist(item._id)" -->
                        <span class="btn">{{ item.comment_type }}回复</span>
                    </p>
                </div>
            </div>
            <span class="rigeht1">
                <van-icon name="good-job" size="20px" color="red" />
                <span class="yes">{{ item.like_count }}</span>
            </span>
        </div>

        <!-- 回复评论 -->
        <div style="width: 100%; height: 80px;"></div>
        <!-- 写评论 -->
        <div class="luns">
            <input type="text" :value="comment" name="" id="same" placeholder="写评论" @click="show = true">
            <van-popup v-model="show" round position="bottom" :style="{ height: '30%' }">
                <textarea name="" cols="30" rows="10" v-model="comment" id="same01"></textarea>
            </van-popup>
            <!-- 发布评论 -->
            <van-icon name="comment-o" size="25px" @click="postComment()" />
        </div>
    </div>
</template>

<script>
import { Popup } from 'vant';
import NavHeader from "../../components/Nav-Header.vue";
export default {
    name: "App03Reply",
    components: {
        NavHeader,
        [Popup.name]: Popup
    },
    data() {
        return {
            list: {},
            listall: [],
            comment: '',
            show: false,
            userInfo: [],
        };
    },

    mounted() {
        this.list = JSON.parse(localStorage.getItem('reply'))
        // console.log(this.list);
        this.gobacklist();
        let userInfos = JSON.parse(localStorage.getItem('xl-userInfo'))
        this.userInfo = userInfos
    },

    methods: {
        // 回复列表
        gobacklist() {
            let { id, user_id } = this.$route.query
            this.$axios.post('/api/get_reply_list', {
                article_id: id,
                skip: 0,
                limit: 10,
                reply_comment_id: this.list._id,
                user_id: user_id
            }).then(res => {
                console.log(res)
                if (res.code == 0) {
                    this.listall = res.data
                    console.log(this.listall)
                }
            })
        },
        // 评论
        postComment() {
            let { id } = this.$route.query;
            console.log(id)

            this.$axios.post('/api/add_comment', {
                user_id: this.userInfo._id,
                article_id: id,
                comment_type: 1,
                reply_comment_id:this.list._id,
                content: this.comment
            }).then((res) => {
                console.log(res)
                if (res.code == 0) {
                    this.$toast(res.msg)
                    this.comment = '',
                        this.gobacklist()
                }
            })
        },
        // 点赞
        // getlike() {
        //     let { id, user_id } = this.$route.query;
        //     this.$axios.post('/api/like', {
        //         article_id: id, user_id: user_id
        //     }).then(res => {
        //         console.log(res)
        //         if (res.code == 0) {
        //             this.getNews()
        //             this.$toast(res.msg)
        //         }
        //     })
        // },
        // 取消点赞
        // getunlike() {
        //     let { id, user_id } = this.$route.query;
        //     this.$axios.post('/api/unlike', {
        //         article_id: id, user_id: user_id
        //     }).then(res => {
        //         console.log(res)
        //         if (res.code == 0) {
        //             this.getNews()
        //             this.$toast(res.msg)
        //         }
        //     })
        // },
    },
};
</script>

<style lang="scss" scoped>
.sun {
    width: 95%;
    // height: 1000px;
    display: flex;
    margin-top: 20px;
    justify-content: space-between;
    border-bottom: 1px solid rgb(204, 204, 204);
    // padding-bottom: 150px;
    // margin-bottom: 200px;
    position: relative;

    .zanwu {
        width: 100%;
        height: 40px;
        text-align: center;
        line-height: 40px;
        font-size: 20px;
        font-weight: 800;

    }

    .sun1 {
        display: block;
        display: flex;
        border-color: aquamarine;
        margin-left: 15px;
        min-width: 100%;

        .username1 {
            margin-left: 10px;
            max-width: 80%;

            .name1 {
                font-size: 15px;
                color: cornflowerblue;
            }

            .zan1 {
                margin-top: 10px;
                width: 95%;
                word-break: break-all;
                word-wrap: break-word;

            }

            .time1 {
                margin-top: 10px;
                font-size: 14px;
                display: flex;

                .btn {
                    display: block;
                    width: 45px;
                    height: 20px;
                    border: 1px solid rgb(204, 204, 204);
                    border-radius: 100px;
                    text-align: center;
                    line-height: 20px;
                    margin-left: 15px;
                    margin-bottom: 5px;
                }
            }
        }
    }

    .rigeht1 {
        margin-right: 15px;
        width: 50px;
        position: absolute;
        right: -10px;

        .yes {
            font-size: 19px;

        }
    }
}

.sunplas {
    width: 95%;
    // height: 1000px;
    display: flex;
    margin-top: 20px;
    justify-content: space-between;
    border-bottom: 1px solid rgb(204, 204, 204);
    // padding-bottom: 150px;
    // margin-bottom: 200px;
    position: relative;
    // margin: auto;
    // margin-top: 50px;

    .zanwu {
        width: 100%;
        height: 40px;
        text-align: center;
        line-height: 40px;
        font-size: 20px;
        font-weight: 800;

    }

    .sun1 {
        display: block;
        display: flex;
        border-color: aquamarine;
        margin-left: 15px;
        min-width: 100%;

        .username1 {
            margin-left: 10px;
            max-width: 80%;

            .name1 {
                font-size: 15px;
                color: cornflowerblue;
            }

            .zan1 {
                margin-top: 10px;
                width: 95%;
                word-break: break-all;
                word-wrap: break-word;

            }

            .time1 {
                margin-top: 10px;
                font-size: 14px;
                display: flex;

                .btn {
                    display: block;
                    width: 45px;
                    height: 20px;
                    border: 1px solid rgb(204, 204, 204);
                    border-radius: 100px;
                    text-align: center;
                    line-height: 20px;
                    margin-left: 15px;
                    margin-bottom: 5px;
                }
            }
        }
    }

    .rigeht1 {
        margin-right: 15px;
        width: 50px;
        position: absolute;
        right: -10px;

        .yes {
            font-size: 19px;

        }
    }
}

.luns {
    width: 100%;
    height: 40px;
    // background-color: aqua;
    line-height: 60px;
    display: flex;
    justify-content:space-between;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid rgb(204, 204, 204);
    background-color: white;
    z-index: 999;
    // padding-right: 100px;

    #same {
        width: 90%;
        height: 30px;
        border: 1px solid rgb(204, 204, 204);
        border-radius: 20px;
    }

    #same01 {
        width: 99%;
        height: 90%;
        font-size: 20px;
        line-height: 22px;
        border: none;
        // padding-top: 10px;
        // border: 1px solid rgb(204, 204, 204);
        // border-radius: 20px;
    }

}
</style>